{% extends "./inc_base.html" %}
{% block style %}
<link href="/static/assets/css/layout-question.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block content %}
{%set cate = category.id|get_cate()%}
<!--
PAGE HEADER

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->
<section class="page-header page-header-xs" >
    <div class="container">

        <div class="testimonial clearfix">
            <figure class="pull-left">
                {%if pic%}
                <i class="ico-color" style="background-color:#1E8BC3"><img class="" src="/static/assets/images/demo/people/300x300/2-min.jpg" alt="" style="width: 50px;height: 50px;display: block; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;"></i>
                {%else%}
                <i class="ico-color et-chat" style="background-color:#1E8BC3"></i>
                {%endif%}
            </figure>
            {%if focus.key_id%}
            <a class="btn btn-default pull-right " style="z-index: 10" >
                取消关注 <span class="badge">{{topic.focus_count}}</span>
            </a>
            {%else%}
            <a class="btn btn-success pull-right " style="z-index: 10" >
                关注 <span class="badge">{{topic.focus_count}}</span>
            </a>
            {%endif%}
            <div class="testimonial-content" style="padding-right: 160px">

                    <h1>{{topic.keyname}}</h1>
                    <p>{{topic.description}}</p>

            </div>
        </div>



        <ul class="page-header-tabs list-inline">
            <li class="{%if mod.id==null%}active{%endif%}"><a href="/t/{{key|urlencode}}">全部</a></li>
            {%for m in models%}
            <li class="{%if mod.id==m.id%}active{%endif%}"><a href="/t/{{key|urlencode}},{{m.id}}"> {{m.title}}</a></li>
            {%endfor%}
        </ul>

        <!-- /page tabs -->
    </div>
</section>

<!-- -->
<section >
    <div class="container">
        <div class="row">

            <!-- LEFT -->
            <div class="col-md-12 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        {%if mod.id ==8%}
                        <div class="timeline">
                            <div class="timeline-hline"><!-- horizontal line --></div>
                            {%endif%}
                            {% for val in list.data %}
                            {% set categoryname = val.category_id|get_cate %}
                            {%if mod.id ==8%}
                            <!-- POST ITEM -->
                            <div class="blog-post-item blog-post-item-inverse padding-top-20 padding-bottom-20 margin-bottom-0 clearfix">
                                <div class="timeline-entry" ><!-- .rounded = entry -->
                                    <a href="#"><img src="/u/avatar/{{val.uid}}" style="width: 58px;height: 58px; margin-top: -10px"></a>
                                    <div class="timeline-vline"><!-- vertical line --></div>
                                </div>
                                <!-- IMAGE -->
                                {% if val.imgs|length==1 %}
                                <figure class="blog-item-small-image margin-bottom-0">
                                    <img class="img-responsive" src="{{val.imgs[0]}}" alt="">
                                </figure>
                                {% endif %}
                                <div class="blog-item-small-content">
                                    <h2><a href="/q/{{val.id}}" title="{{val.title}}">{{val.title}}</a></h2>
                                    <ul class="blog-post-info list-inline padding-bottom-10">
                                        <li>

                                            <a class="" href="{{categoryname.url}}">
                                                <span class="label label-light">{{categoryname.name}}</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="font-lato">{{val.uid|get_nickname}}</span>
                                            </a>
                                            <span class="font-lato"> 回复了问题</span>
                                        </li>
                                        <li>
                                <span class="font-lato">
                                {{val.focus_count}} 人关注
                                    </span>
                                        </li>
                                        <li>
                                            <span class="font-lato">3 个回复</span>

                                        </li>
                                        <li>
                                            <span class="font-lato">14 次浏览</span>
                                        </li>
                                        <li>
                                            <span class="font-lato"> {{val.create_time|moment}}</span>
                                        </li>

                                    </ul>
                                    {% if val.imgs|length>1 %}
                                    <div class="row margin-bottom-10">
                                        {%set i = 0%}
                                        {%for img in val.imgs%}
                                        {%if i< 4 %}
                                        <div class="col-md-3"><img class="img-responsive" src="{{img}}" alt=""></div>
                                        {%endif%}
                                        {%set i=i+1%}
                                        {%endfor%}
                                    </div>
                                    {%endif%}
                                    <p>{{val.detail|delhtmltags|truncate(90, true, "...")|safe}}</p>
                                </div>

                            </div

                                    {%else%}
                                    <!-- POST ITEM -->
                            <div class="blog-post-item {%if val.description%}padding-bottom-20{%else%}padding-bottom-0 {%endif%} margin-bottom-20 clearfix">

                                <!-- IMAGE -->
                                {% if val.cover_id>0 %}
                                <figure class="blog-item-small-image margin-bottom-0">
                                    <img class="img-responsive" src="{{val.cover_id|get_pic('m=1,w=200,h=120')}}" alt="">
                                </figure>
                                {% endif %}
                                <div class="blog-item-small-content">
                                    <h2><a href="{%if val.mod_type == 0%}{{val.name|get_url(val.id)}}{%else%}/mod/{{mod.name}}/{{val.id}}{%endif%}" target="_blank" title="{{val.title}}">{{val.title}}</a></h2>

                                    <ul class="blog-post-info list-inline {%if val.description%}padding-bottom-10{%else%}margin-bottom-0{%endif%}">
                                        <li>
                                            <a href="#"><i class="fa fa-clock-o"></i><span class="font-lato">{{val.create_time|moment('lll')}}</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-comment-o"></i><span class="font-lato">{{val.view}}</span>
                                            </a>
                                        </li>
                                        <li>
                                            <i class="fa fa-folder-open-o"></i><a class="category" href="{{categoryname.url}}"><span class="font-lato">{{categoryname.name}}</span>
                                        </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-user"></i><span class="font-lato">{{val.uid|get_nickname}}</span>
                                            </a>
                                        </li>
                                    </ul>
                                    {%if val.description%}
                                    <p>{{val.description|truncate(90, true, "...")}}</p>
                                    {%endif%}
                                </div>

                            </div>
                            <!-- /POST ITEM -->
                            {%endif%}
                            {%endfor%}
                            {%if mod.id ==8%}
                        </div>
                        {%endif%}
                    </div>
                    <div class="panel-footer text-left">
                        {{pagination | safe}}
                    </div>
                </div>
            </div>

            <!-- RIGHT -->

        </div>

    </div>
</section>
<!-- / -->
{% endblock %}

